<template>
  <div 
    class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300 hover:shadow-xl"
    :class="{ 'animate-pulse': loading }"
  >
    <!-- 加载状态 -->
    <div v-if="loading" class="space-y-4">
      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
      <div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
      <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
    </div>
    
    <!-- 真实内容 -->
    <div v-else>
      <!-- 图标和标题 -->
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center space-x-3">
          <div 
            class="p-3 rounded-lg"
            :class="colorClasses"
          >
            <span class="text-2xl">{{ icon }}</span>
          </div>
          <div>
            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ title }}</h3>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ value }}</p>
          </div>
        </div>
        
        <!-- 趋势指示器 -->
        <div v-if="trend" class="text-right">
          <div 
            class="flex items-center space-x-1 text-sm"
            :class="trend > 0 ? 'text-green-600' : 'text-red-600'"
          >
            <ArrowUpIcon v-if="trend > 0" class="w-4 h-4" />
            <ArrowDownIcon v-else class="w-4 h-4" />
            <span>{{ Math.abs(trend) }}%</span>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">较上周</p>
        </div>
      </div>
      
      <!-- 进度条（可选） -->
      <div v-if="progress !== undefined" class="mt-4">
        <div class="flex justify-between text-sm text-gray-500 dark:text-gray-400 mb-1">
          <span>进度</span>
          <span>{{ progress }}%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
          <div 
            class="h-2 rounded-full transition-all duration-500"
            :class="progressBarColor"
            :style="{ width: progress + '%' }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/vue/24/solid'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    required: true
  },
  icon: {
    type: String,
    default: '📊'
  },
  color: {
    type: String,
    default: 'blue',
    validator: (value) => ['blue', 'green', 'yellow', 'purple', 'red', 'indigo'].includes(value)
  },
  loading: {
    type: Boolean,
    default: false
  },
  trend: {
    type: Number,
    default: null
  },
  progress: {
    type: Number,
    default: undefined
  }
})

// 颜色配置
const colorClasses = computed(() => {
  const colors = {
    blue: 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300',
    green: 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300',
    yellow: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-300',
    purple: 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300',
    red: 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-300',
    indigo: 'bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300'
  }
  return colors[props.color]
})

const progressBarColor = computed(() => {
  const colors = {
    blue: 'bg-blue-600',
    green: 'bg-green-600',
    yellow: 'bg-yellow-600',
    purple: 'bg-purple-600',
    red: 'bg-red-600',
    indigo: 'bg-indigo-600'
  }
  return colors[props.color]
})
</script>

<style scoped>
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
</style>